<style scoped>
.gap {
  margin: 5px;
}
</style>
<template>
  <div>
    <div class="ivu-mt gap">
      <el-card :bordered="false">
        <p class="card-title">
          律师费计算器
        </p>
        <el-divider dashed />
        <el-row :gutter="30">
          <el-col :span="12" :xs="24" :sm="24" :md="12" :lg="12">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="省份">
                <el-select v-model="form.province" @change="onProvinceChange" style="width: 365px">
                  <el-option v-for="item in provinceList" :value="item.value" :key="item.value">{{item.value}}</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标的金额">
                <el-input v-model="form.caseObject" type="number" placeholder="请输入金额" @change="reset()" style="width: 365px">
                  <span slot="append">元</span>
                </el-input>
              </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="最低收费">
                <el-input v-model="form.feeMin" readonly><span slot="append">元</span></el-input>
              </el-form-item>
              <el-form-item label="取中收费">
                <el-input v-model="form.feeMiddle" readonly><span slot="append">元</span></el-input>
              </el-form-item>
              <el-form-item label="最高收费">
                <el-input v-model="form.feeMax" readonly><span slot="append">元</span></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="calculate()">计算</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" :xs="24" :sm="24" :md="12" :lg="12">
            <el-divider orientation="left">参考依据</el-divider>
            <pre>{{form.basis}}</pre>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import {API} from '../../customized/http/api';
import Util from '../../customized/util/utils';
export default {
  components: {

  },
  data() {
    return {
      form: {
        province: "",
        caseObject: "",
        feeMin: "",
        feeMiddle: "",
        feeMax: "",
        basis: "",
        feeMinDesc: ""
      },
      provinceList: [
      //     {
      //   value: '北京市'
      // }, {
      //   value: '天津市'
      // }, {
      //   value: '福建省'
      // }, {
      //   value: '江西省'
      // }, {
      //   value: '河北省'
      // }, {
      //   value: '河南省'
      // }, {
      //   value: '海南省'
      // }, {
      //   value: '湖南省'
      // }, {
      //   value: '湖北省'
      // }, {
      //   value: '西藏自治区'
      // }, {
      //   value: '甘肃省'
      // }, {
      //   value: '青海省'
      // }, {
      //   value: '宁夏回族自治区'
      // },{
      //   value: '山东省'
      // }, {
      //   value: '陕西省'
      // }, {
      //   value: '上海市'
      // }, {
      //   value: '江苏省'
      // }, {
      //   value: '浙江省'
      // }, {
      //   value: '安徽省'
      // }, {
      //   value: '山西省'
      // }, {
      //   value: '内蒙古自治区'
      // }, {
      //   value: '辽宁省'
      // }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadProvince();
    });
  },
  watch: {

  },
  computed: {

  },
  methods: {
    loadProvince() {
      API.subArea({ code: 0 })
          .then((response) => {
            let result = response.data;
            this.provinceList = result;
          }).catch((error) => {
        console.log(error);
      });
    },
    calculate() {
      let province = this.form.province;
      let caseObject = this.form.caseObject;

      if (!province) {
          this.$notify.error({
              title: '错误',
              message: '请选择正确的省份'
          });
          return;
      }

      if (!caseObject) {
          this.$notify.error({
              title: '错误',
              message: '请输入正确的标的金额'
          });
          return;
      }

      let postJson = {};
      postJson.province = province;
      postJson.caseObject = caseObject;

      API.getLawyersFee(postJson)
          .then((response) => {
            let result = response.data;

            if (!result) {
                this.$notify.info({
                    title: '消息',
                    message: '补充中'
                });
                return;
            }

            this.form.feeMin = result.feemin;
            this.form.feeMiddle = result.feemiddle;
            this.form.feeMax = result.feemax;
            this.form.basis = result.basis;
          }).catch((error) => {
        console.log(error);
      });
    },
    reset() {
      this.form.feeMin = "";
      this.form.feeMiddle = "";
      this.form.feeMax = "";
      this.form.basis = "";
    },
    onProvinceChange(value) {
      this.reset();
    }
  }
}
</script>